<template>
	<view class="content">
    <div class="MainBody">
      <u-search
        :showAction="true"
        actionText="搜索"
        :animation="true"
        @custom="seatchDevice"
        v-model="SearchVal" />
        <view class="realBox_one" v-for="(item,index) in groupData" :key="index">
          <view class="deviceBox">
            <span style="font-weight: 600;">设备名称：</span>{{item.componentName}}
          </view>
          <view class="deviceBox">
            <span style="font-weight: 600;">备注：</span>{{item.remark}}
          </view>
          <view class="deviceBox">
            <span style="font-weight: 600;">创建时间：</span>{{ item.createTime | setTime }}
          </view>
          <view class="lastForDevice">
            <view class="customButton" @click="ToDetails(item.id)">查看</view>
            <view class="customButton" @click="setDeviceDetail(item.id)">修改</view>
          </view>
        </view>
        
        <u-loadmore 
          :status="statusLoamore" 
          @loadmore="clickLoadmore" 
          fontSize="36rpx" 
          line
          :loading-text="loadingText" 
          :loadmore-text="loadmoreText" 
          :nomore-text="nomoreText"/>
    </div>
	</view>
</template>

<script>
  import { timestampToDatetime } from '@/untils/index';
  import request from '@/request/api';
	export default {
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      },
      setPhone(val){
        return val.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
      }
		},
		data() {
			return {
        groupData: [],
        SearchVal: '',
        statusLoamore:'loadmore',
        loadingText: '加载中...',
        loadmoreText: '加载更多',
        nomoreText: '已加载完',
        pagetion:{
          page:1,
          limit: 5,
          total: 1
        }
			}
		},
    components: {
      
		},
		onLoad() {
		},
    onShow(){
      this.getGroupList()
    },
		methods: {
      onReachBottom(){
        if ((this.pagetion.page * this.pagetion.limit) >= this.pagetion.total ) {
          this.statusLoamore = 'nomore'
          return 
        } else {
          setTimeout(() => {
            this.statusLoamore = 'loading';
            this.pagetion.page++
            this.getGroupList()
          }, 500);
        }
      },
      clickLoadmore(){
        if ((this.pagetion.page * this.pagetion.limit) >= this.pagetion.total ) {
          this.statusLoamore = 'nomore'
          return 
        } else {
          setTimeout(() => {
            this.statusLoamore = 'loading';
            this.pagetion.page++
            this.getGroupList()
          }, 500);
        }
      },
      getGroupList(){
        let options = {
          url: '/deviceComponent/list',
          method: 'GET',
          data: {
            limit: 5,
            page: this.pagetion.page ,
            kw: this.SearchVal
          }
        }
        request(options).then((result)=> {
          if (result.code === '200') {
            const nullArr = result.data.records
            if (this.groupData.length >= result.data.total) {
              return false
            } else {
              this.groupData.push(...nullArr)
              // console.log(this.groupData);
              
              this.pagetion.total = result.data.total
            }
          }
        })
      },
      seatchDevice(kw){
        this.pagetion.page = 1
        this.tahList = []
        this.SearchVal = kw
        this.groupData = []
        if (kw != '') {
          let options = {
            url: '/deviceComponent/list',
            method: 'GET',
            data: {
              limit: 5,
              page: this.pagetion.page ,
              kw: this.SearchVal
            }
          }
          request(options).then((result)=> {
            if (result.code === '200') {
              this.groupData = result.data.records
              this.pagetion.total = result.data.total
            }
          })
        } else {
          this.getGroupList()
        }
      },
      ToDetails(id){
        uni.navigateTo({
          url: `./allotDetail?id=${id}`
        })
      },
      setDeviceDetail(id){
        uni.navigateTo({
          url: `./allotUpdate?id=${id}`
        })
      }
		}
	}
</script>

<style lang="scss">
.MainBody {
  margin: 20rpx 3%;
  width: 94%;
  height: auto;
}

.realBox_one {
  width: 95%;
  height: auto;
  border: 1rpx solid #000;
  margin: 15rpx auto;
  .deviceBox {
    width: 94%;
    margin: 10rpx 3%;
    padding: 20rpx 0;
    height: 50rpx;
    line-height: 50rpx;
    display: flex;
  }
  .lastForDevice {
    margin: 30rpx 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    .customButton {
      width: 40%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 10rpx;
      color: #fff;
    }
    :nth-child(1) {
      background-color: #3c9cff;
    }
    :nth-child(2) {
      background-color: #d4237a;
    }
  }
}

</style>
